<template>
    <div class="chat-container">
        <el-scrollbar height="400px">
            <div class="chat-messages">
                <div v-for="(message, index) in messages" :key="index" :class="['message', message.type]">
                    {{ message.content }}
                </div>
            </div>
        </el-scrollbar>
        <div class="input_button">
            <el-input v-model="inputMessage" placeholder="请输入您的问题" @keyup.enter="sendMessage"/>
            <el-button type="primary" @click="sendMessage">发送</el-button>
        </div>
    </div>
</template>

<script>
import {ref} from 'vue';
import axios from 'axios';

export default {
    // 组件名称
    name: 'ChatComponent',
    // 组合式API入口
    setup() {
        // 响应式变量：存储聊天消息数组
        const messages = ref([]);
        // 响应式变量：存储输入框中的消息内容
        const inputMessage = ref('');
        // 发送消息的异步函数
        const sendMessage = async () => {
            // 检查输入消息是否为空（去除首尾空格后）
            if (inputMessage.value.trim() === '') return;

            // 将用户发送的消息添加到消息数组中
            messages.value.push({
                // 消息类型：用户消息
                type: 'user',
                // 消息内容
                content: inputMessage.value
            });
            try {
                // 向后端发送GET请求获取AI回复
                axios.get('http://localhost:8082/mcp?prompt=' + inputMessage.value, {}).then(res => {
                    // 将AI回复添加到消息数组中
                    messages.value.push({
                        // 消息类型：机器人消息
                        type: 'bot',
                        // 消息内容：后端返回的数据
                        content: res.data
                    });
                })
            } catch (error) {
                // 错误处理：输出错误信息到控制台
                console.error('请求出错:', error);
                // 向用户显示错误提示消息
                messages.value.push({
                    // 消息类型：机器人消息
                    type: 'bot',
                    // 错误提示内容
                    content: '抱歉，请求出错，请稍后再试。'
                });
            }
            // 清空输入框内容
            inputMessage.value = '';
        };
        // 暴露给模板使用的响应式变量和方法
        return {
            messages,
            inputMessage,
            sendMessage
        };
    }
};
</script>

<style scoped>
/* 聊天容器样式 - 类似豆包对话框布局 */
.chat-container {
    max-width: 1000px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    height: 91.25vh; /* 高度占满视口95% */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直方向排列子元素 */
    padding: 20px; /* 内边距 */
    box-sizing: border-box; /* 盒模型计算方式 */
    background-color: #f5f7fa; /* 背景色 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 聊天消息区域样式 */
.chat-messages {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直方向排列消息 */
    gap: 15px; /* 消息间距 */
    padding: 15px; /* 内边距 */
}

/* 通用消息样式 */
.message {
    padding: 12px 18px; /* 内边距 */
    border-radius: 18px; /* 圆角边框 */
    max-width: 70%; /* 最大宽度 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    line-height: 1.5; /* 行高 */
}

/* 用户消息样式 */
.user {
    background-color: #007bff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    align-self: flex-end; /* 右对齐 */
}

/* 机器人消息样式 */
.bot {
    background-color: #ffffff; /* 白色背景 */
    align-self: flex-start; /* 左对齐 */
}

/* 输入框样式 */
.el-input {
    width: 90%; /* 宽度占满 */
}

.input_button {
    display: flex;
    justify-content: center; /* 水平居中 */
}
</style>